<template>
  <el-card class="box-card5">
    <template #header>
      <div class="card-header">
        <el-tooltip>
          <template #content>{{ $t("home.tip") }}</template>
          <IEpWarning></IEpWarning
        ></el-tooltip>
        <span>{{ $t("home.components") }}</span>
      </div>
    </template>
    <el-carousel type="card" :interval="5000" arrow="never" trigger="click">
      <el-carousel-item v-for="(item, index) in data" :key="index">
        <el-image :src="item.src" fit="fill" @dblclick="open(item.to)" />
      </el-carousel-item>
    </el-carousel>
  </el-card>
</template>
<script lang="ts">
export default {
  // name: "card5",
};
</script>
<script lang="ts" setup>
const open = (src: string) => {
  window.open(src);
};
const data = [
  {
    to: "https://www.wangeditor.com/",
    src: "/img/logo/wangEditor.png",
  },
  {
    to: "https://mengshukeji.gitee.io/LuckysheetDocs/zh/",
    src: "/img/logo/Luckysheet.png",
  },
  {
    to: "http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D",
    src: "/img/logo/v-md-editor.png",
  },
  {
    to: "https://icon-sets.iconify.design/",
    src: "/img/logo/Iconify.png",
  },
];
</script>

<style lang="scss" scoped>
.box-card5 {
  min-width: 300px;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0px;
  .el-image {
    height: 100%;
  }
}
</style>
